<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>程序小象-商品介绍</title>
    <link rel="stylesheet" type="text/css" href="css/comInfo.css" />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./js/comInfo.js"></script>
</head>

<body>
    <div class="home_header">
        <div class="head-main">
            <div class="nav_left">
                <img src="./img/loginPage/logoLogin.jpg">
                <span>程序小象</span>
                <ul>
                    <li><a href="">就业班</a></li>
                    <li><a href="">在职提升课</a></li>
                    <li><a href="">全部课程</a></li>
                    <li><a href="">咨讯</a></li>
                    <li><a href="">手记</a></li>
                </ul>
            </div>
            <div class="nav_right">
                <ul>
                    <li><a href="">下载APP</a></li>
                    <li id="shopping"><a href="">购物车</a></li>
                    <li id="visitor">
                        <a href="./login.html">登录</a> /
                        <a href="./registerPage.html">注册</a>
                    </li>
                    <li id="user">
                        <img src="./img/loginPage/user.jpg">
                    </li>
                </ul>
            </div>
            <div id="userTab">
                <div class="userCont">
                    <div class="userinfo">
                        <div class="userfile">
                            <img src="./img/loginPage/user.jpg">
                            <div>
                                <h5 id="user-name"></h5>
                                <span>经验<b>5540</b> </span>
                                <span>积分<b>0</b></span>
                            </div>
                        </div>
                        <div class="userfunc">
                            <a href="">我的课程</a>
                            <a href="">订单中心</a>
                            <a href="">积分商城</a>
                            <a href="">个人设置</a>
                        </div>
                    </div>
                    <div class="line"></div>
                    <a href="./login.html">退出登录</a>
                </div>
            </div>
        </div>
    </div>

    <div class="main1">
        <h1>Spring Cloud + Vue 前后端分离开发企业级在线视频课程系统</h1>
        <h5>冲击在线教育/培训新赛道 从0开始搭建你自己的完整项目作品</h5>
    </div>
    <div class="main2">
        <div class="info">
            <div class="info-pay">
                <span>￥ 328.00</span>
                <span>花呗付款</span>
                <span>京东白条</span>
            </div>
            <div class="info-det">
                <span><b>难度 </b> 初级 </span>&nbsp;·
                <span><b>时长 </b> 22小时 </span>&nbsp;·
                <span><b>学习人数 </b> 227 </span>&nbsp;·
                <span><b>综合评分 </b> 10.00</span>
            </div>
        </div>
        <div class="btn">
            <button class="purchase">立即购买</button>
            <button class="add">加入购物车</button>
            <img id="car" src="./img/icon/car.png">
        </div>
    </div>

    <div class="main3">
        <div id="expertinfo" style="display: none;">
            <h1>阿海</h1>
            <h3>高级技术专家</h3>
            <p>十二年Java研发和带团队经验，目前在知名第三方支付公司担任项目经理，负责公司核心支付项目的研发管理工作及技术培训工作，多年的支付相关工作造就了严谨的代码开发风格。专注于Java全栈技术研究和分享，独立完成过多个项目，熟悉项目开发的生命周期，从框架搭建到部署上线。讲课风格以实战为基础，不说废话，只讲干货。
            </p>
            <div></div>
        </div>
        <div class="content">
            <div class="cont1">
                <div class="play">
                    <div class="play-btn"></div>
                </div>
                <span>观看完整视频</span>
            </div>
            <div class="cont2">
                <h2>Spring Cloud + Vue 前后端分离 开发企业级在线视频课程系统</h2>
                <p>在线学习一夕之间席卷南北，互联网教育的未来潜力已毋庸置疑。视频作为在线教育的核心载体，其相关系统开发也是各大在线教育企业的重中之重。本课程用当下热门的微服务架构SpringCloud和前端架构Vue，带领你一起开发企业级的在线视频课程系统，了解视频学习系统的核心业务特色，用一门课程掌握前后端技术，并拥有专属于自己的高质量线上作品。
                </p>
            </div>

            <div class="cont3">
                <img id="expert" src="./img/loginPage/expert.jpg">
                <h2>阿海</h2>
                <span>高级技术专家</span>
            </div>
        </div>
    </div>

    <footer>
        <div>
            <div class="footer_left">
                <p>程序小象根据IT方向的线上学习特点，研发人机互动教学系统， 打造领先的学习模式。平台签约了十名大牛联合创办，
                    每个合伙人再召集几名身边的技术大咖，根据程序员的岗位需求研发精品课程，并将一门学科中所需要的全部学习资料汇总在一起，
                    且实时更新。选中一门课程即拥有全部的精品学习资源，不需要再找其它资源补充， 按计划学习结束后即可直接从事对应的开发工作。</p>
            </div>
            <div class="footer_right">
                <div>
                    <h6>关于我们</h6>
                    <ul>
                        <li><a href="">了解我们</a></li>
                        <li><a href="">企业文化</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h6>帮助中心</h6>
                    <ul>
                        <li><a href="">常见问题</a></li>
                        <li><a href="">问答帮助</a></li>
                        <li><a href="">学员反馈</a></li>
                    </ul>
                </div>
                <div>
                    <h6>新手指南</h6>
                    <ul>
                        <li><a href="">挑选课程</a></li>
                        <li><a href="">购买课程</a></li>
                        <li><a href="">学习课程</a></li>
                        <li><a href="">配套资源</a></li>
                    </ul>
                </div>
            </div>
            <div class="power"><a href="">©华广17计科阿海</a></div>
        </div>
    </footer>
</body>

</html>